<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>随机颜色变换</title>
		<style>
			#ronqi {
				width: 1300px;
				height: 200px;
				background: rgb(106, 80, 255);
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 0;
			}
			
			.yuan {
				width: 100px;
				height: 100px;
				background-color: rgb(85, 226, 66);
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<div id="ronqi">
			<div class="yuan"></div>
			<div class="yuan"></div>
			<div class="yuan"></div>
			<div class="yuan"></div>
			<div class="yuan"></div>
			<div class="yuan"></div>
			<div class="yuan"></div>
		</div>
		<button id="k">开始</button>
		<button id="j">结束</button>
	</body>

</html>
<script>
	var div = document.getElementsByClassName('yuan');
	var k = document.getElementById('k');
	var j = document.getElementById('j');
	console.log(div);
	var top1;

	k.onclick = function() {

		clearInterval(top1);
		
		 top1 = setInterval(function() {
			for(var i = 0; i < 7; i++) {
				var r = Math.floor(Math.random() * 255);
				var g = Math.floor(Math.random() * 255);
				var b = Math.floor(Math.random() * 255);
				div[i].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
			}
		}, 1000);
		
		console.log(top1);
	}
	
	
	j.onclick = function() {
			clearInterval(top1);
		}
</script>